<template>
  <div class="page" id="order">
  
    <nav-top title='产品下单'></nav-top>
       <xl-footer class="">
        <div class="footer-content">
        <span>实付款:</span>
        <div class="total" v-cloak>￥{{total|toFixed2}}</div>
        </div>
        <button id='submitOrder' @click='sumbitOrder'>提交订单</button>
      </xl-footer> 
    <page-content>
      <swiper :aspect-ratio=".85" :show-dots="false" v-model="swiperIndex"
      >
  
        <swiper-item 
        v-for='(item,index) in swiperList' 
        :key='index'
        >
          <div class="img" :style="{backgroundImage:'url('+item.big+')'}"></div>
        </swiper-item>
  
        <div class="pagination">
    
          {{swiperIndex+1}}/{{swiperList.length}}
    
        </div>
      </swiper>
  
  
      <xl-content>
      <div class="content-block">
        <h1>{{proInfo.title}}</h1>
      </div>
  
        <div class="pro-info content-block">{{proInfo.remark}}</div>

        <div class="price-count content-block">
          <div class="price-logistics">
            
          <div class="price">
          ￥{{proInfo.price}}
          </div>
          <div class="logistics">
            运费:{{logistics}}
          </div>
          </div>
          <counter v-model="count"></counter>
        </div>

      </xl-content>
      <xl-content>
        <div class="content-block tail-arrow">
        <router-link to="/my-address">
          <span>配送至：</span>
          <span class="line-content" v-text="address"></span>
        </router-link>
        </div>
      </xl-content>
      <xl-content>
        <div class="content-block tail-arrow" @click='showBill=true'><span>
        发票开具:    {{bill}}</span></div>
      </xl-content>

      </page-content>


      <!--新建收货地址-->
      <popup v-model='showBill' height='100%'>
        <nav-top title="发票开具">
          <span slot="left" @click='showBill=false'>返回</span>
          <span slot="right">保存</span>
        </nav-top>
        <page-content>
         <xl-content>
            <div class="content-column">
              是否开发票
              <div class="content-block">
              <xl-radio v-model="needBill" :inputValue='1'>是</xl-radio>
              <xl-radio v-model="needBill" :inputValue='0'>否</xl-radio>
              </div>
            </div>
         </xl-content> 
         <xl-content>
            <div class="content-column">
            发票抬头
            <div class="content-block">
            <xl-radio v-model="billType" 
            :inputValue='1'
            >个人</xl-radio>
            <xl-radio v-model="billType" 
            :inputValue='2'
            >公司</xl-radio>
            </div>
            </div>
            <div class="content-block"><textarea name="" id="" cols="30" rows="10" v-model="billHead"></textarea></div>
         </xl-content>
        </page-content>
      </popup>
  </div>
</template>

<script>
  import navTop from '@c/header/navTop'
  import pageContent from '@c/pagecontent'
  import xlContent from '@c/content.vue'
  import Counter from '@c/counter.vue'
  import xlFooter from '@c/footer.vue'
  import xlRadio from '@c/xlRadio.vue'

  import {
    Swiper,
    SwiperItem,
    Popup
  } from 'vux'

  import {proInfo} from '../../config/api.js'
  export default {
  
    name: 'order',
  
    components: {
      Swiper,
      SwiperItem,
      navTop,
      pageContent,
      xlContent,
      Counter,
      xlFooter,
      Popup,
      xlRadio
    },
  
    data() {
      return {
        showBill: false,
        needBill:0,
        billType:1,
        billHead:'',
        count:1,
        proInfo:{
          title:'',
          price:1,
          remark:''
        },
        logistics: '包邮',
        swiperList: [],
        swiperIndex: 0,
        billArray:['不开发票','个人发票','公司发票']
      }
    },
    computed:{
      address () {
        let text = this.$store.state.address.text 
        return text ? text : '您未填写收货信息，马上去填写'
      },
      bill () {
        return this.billArray[this.billType]
      },
      total () {
        return (this.proInfo.price *this.count)
      }
    },
    watch: {
    },
    methods:{
      sumbitOrder(){
        this.$router.push('/pay-method')
      }
    },
    activated(){
    },
    deactivated(){
      // this.proInfo={}
    },
    beforeRouteEnter: (to, from, next) => {
      // 产品ID
      let id = to.params.id
      next(vm => {
        proInfo({
          id: parseInt(id)
        },res => {
          vm.swiperList = res.data.data.pic_show
          vm.proInfo = res.data.data.itemList
        })
    })
    }
  }
</script>

<style lang="scss" >
@import '../../sass/mixin.scss';
@import '../../sass/variable.scss';
  #order {
  h1 {
    font-size: 36px;
  }
  .pro-info {
    font-size: 26px;
    color: #000;
  }
  .vux-slider>.vux-swiper {
    background-color: #fff;
    &>.vux-swiper-item>.img {
      max-width: 100%;
      height: 100%;
      background: center center no-repeat;
      background-size: contain;
    }
  }
  .price-count {
    @include flex($ai: center);
    .price-logistics{
      @include flex($jc:flex-start);
    }
    .price {
      color: #fb4700;
      font-size: 36px;
      /*px*/
      font-weight: 700;
      &:first-letter {
        font-size: 26px;
        /*px*/
      }
    }
    .logistics {
      font-size: 22px;
      /*px*/
      // line-height: 2;
      // padding: 0 0 0 40px;
      margin-left: 40px;
    }
    #counter {
      display: flex;
    }
  }
  .pagination {
    position: absolute;
    bottom: 3%;
    right: 3%;
    z-index: 499;
    font-size: 22px;
    /*px*/
    /*no*/
    width: 60px;
    /*px*/
    /*no*/
    height: 60px;
    /*px*/
    /*no*/
    background-color: #000;
    opacity: .5;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    line-height: 60px;
    /*px*/
    /*no*/
  }
  footer {
    .total {
      margin: 0 50px 0 20px;
      font-size: 34px;
      color: #fb4700;
      font-weight: 700;
      /*px*/
      &:first-letter {
        font-size: 26px;
        /*px*/
      }
    }
  #submitOrder{
    align-self: stretch;
    background-color: $ora;
    flex: 1 2 50%;
    max-width: 50%;
    color:#fff;
    font-size: 34px;
  }
  }
}

.vux-popup-picker-select{
  font-size:28px;/*px*/
}
</style>